<template>
	<view class="dialogueBox"> 
		<view class="message" v-for="(item, index) in messages" :key="index">
			<image v-if="item.send_id !== this.user.id" @click="goProfile"class="head-image" :src="this.receiver.avatar"> </image>
			<image v-if="item.send_id === this.user.id" @click="" class="head-image" src='/static/tab-Icons/white.png'> </image>
				  <view class="column" :class="{'sent-column': item.send_id === user.id, 'received-column': item.send_id !== user.id}">

					<view class="messageContent">{{ item.text }}</view>
				</view>
			<image v-if="item.send_id !== this.user.id" @click="goProfile"class="head-image" src='/static/tab-Icons/white.png'> </image>
			<image v-if="item.send_id === this.user.id" @click="" class="head-image" :src="this.user.avatar"> </image>
		</view>
	</view>
	
	
	<div class="InputContainer">
		<input	v-model="InputValue"
				class="InputBox"
				placeholder="请输入..."
				placeholder-style="font-style: italic"
				@blur="blurInput"
				@confirm="sendMessage(this.InputValue)"/>
		<button class="sendBox" @click="sendMessage(this.InputValue)">发送</button>
	</div>
</template>

<script>
	import config from '@/config.js';
	export default {
		data() {
			return {
				messages:[
					{avatar: null, name: '朋友1', username: '1', title:"OTTO的大作1", comment:"写得好", text:"222"},
					{avatar: null, name: '朋友1', username: '1', title:"OTTO的大作1", comment:"大作，太伟大了，感觉是真正的大师之作"},
					{avatar: null, name: '朋友1', username: '1', title:"OTTO的大作1", comment:"写得好"},
					{avatar: null, name: '朋友1', username: '1', title:"OTTO的大作1", comment:"写得好"},
					{avatar: null, name: '朋友1', username: '1', title:"OTTO的大作1", comment:"写得好"},
					{avatar: null, name: '朋友1', username: '1', title:"OTTO的大作1", comment:"写得好"},
					{avatar: null, name: '朋友1', username: '1', title:"OTTO的大作1", comment:"写得不好"},
					{avatar: null, name: '朋友2', username: '2', title:"OTTO的大作1", comment:"写得好"},
					{avatar: null, name: '朋友3', username: '3', title:"OTTO的大作1", comment:"写得好"}
				],
				
				InputValue:'',
				receiver:[
					
				],
				receivedData: 999
				
			}
		},
		
		onLoad(options){
			
			if (options.data) {
			    this.receivedData = JSON.parse(decodeURIComponent(options.data));
			}
		   
			this.user = uni.getStorageSync('xm-user');
			let that = this;
			this.changeTimer = setInterval(function(){
			         uni.request({
			         	url: config.baseUrl + '/users/selectById?id=' + JSON.stringify(that.receivedData),
			         	method: 'GET',
			         	success(res) {
			         		that.receiver = res.data;
			         	}
			         })
			         uni.request({
			         	url:config.baseUrl +'/message/selectdialogue?sendId=' + that.user.id + '&&receiveId='+ JSON.stringify(that.receivedData),
			         	method:'GET',
			         	success(res){
			         		that.messages = res.data;
							for(let i = 0; i < that.messages.length; i++){
								if( that.messages[i].type == 0){
									that.messages.splice(i, 1);
								}
							}
			         	}
			         })
			},1000);
		
		},
		
		onUnload() {
			// 清除定时器
			if (this.changeTimer) {
				clearInterval(this.changeTimer);
				this.changeTimer = null;
			}
		},
		
		methods: {
			blurInput(){
				this.InputValue = '';
			},
			
			
			sendMessage(query){
				let that = this
				let form0 = {
					send_id : that.user.id,
					receive_id : that.receiver.id,
					type: 1,
					text: query
				};
				
				let form = JSON.parse(JSON.stringify(form0));
				
					console.log(form);
				
				if(query !== '' && query.length <= 50){
					uni.request({
						url: config.baseUrl + '/message/add',
						data:form,
						method:'POST',
						
						success(res){
							console.log('-----------------------------发送成功');
							that.InputValue='';
						}
					})
				} else if (query.length > 50){
					uni.showToast({
						icon:'error',
						title:'内容过长'
					})
				} else {
					uni.showToast({
						icon:'error',
						title:'内容不能为空'
					})
				}
			},
			
			goProfile(){
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' +  this.receivedData,
				})
			}
		}
	}
</script>

<style>
	.dialogueBox{
		padding: 30rpx;
		height:680px;
		background-color: white;
		padding: 10rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
		margin-top: 10px;
		overflow-y: auto;
	}
	
	.InputContainer{
		display: flex;
		position: fixed;
		height: 60px;
		background-color:aliceblue;
		bottom: 0;
		width: 120%;
	}
	
	.InputBox{
		border-radius: 5px;
		height: 45px;
		margin-left: 5px;
		width: 65%;
		background-color: white;
		margin-top: 5px;
	}
	
	.sendBox{
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		
		margin-left: 5px;
		height: 45px;
		margin-top: 5px;
		width: 70px;
	}
	
	.message{
		display: flex;
		margin-bottom: 15px;
		width: 100%;
		height: 60px;
	}
	
	.head-image{
		width: 20%;
		height: 70%;
		border-radius: 50%;
		margin-right: 4px;
		margin-top: 1.5%;
		margin-left: 2px;
		margin-bottom: 2%;
		
		max-height: 45px;
		max-width: 45px;
	}

	.received-column{
		background-color: #f7f7f7;
		padding: 10px;
		border-radius: 5px;
		margin-right: 20%;
		margin-bottom: 1%;
		flex: 1;
	}
	
	.sent-column{
		background-color: #f7f7f7;
		padding: 10px;
		border-radius: 5px;
		margin-left: 20%;
		margin-bottom: 1%;
		flex: 1;
	}
	
	.messageContent{
		font-size: 16px;
		word-break: break-all;
	}
	
	
	
	
	
</style>
